<template>
  <div>
    <div id="navbar">
      <div class="lww_header">
        <div class="header_wrap">
          <div class="header_logo">
            <a href="javascript:;" class="lww_logo"></a>
          </div>
          <ul class="header_nav">
            <li name="index" @click="toHome()"><a>首页</a></li>
            <li name="destination" @click="backDestination()"><a>目的地</a></li>
            <li name="strategy" class="header_nav_active">
              <a>旅游攻略</a>
            </li>
            <li name="travel"><a>旅游日记</a></li>
            <li name="">
              <a href="javascript:;">去旅行<i class="icon_caret_down"></i></a>
            </li>
            <li name="">
              <a href="javascript:;">社区<i class="icon_caret_down"></i></a>
            </li>
          </ul>
          <div class="header_search">
            <input type="text" />
            <a class="icon_search"></a>
          </div>
          <div class="login_info" style="display: none" v-show="ShowLogin">
            <div class="head_user">
              <a>
                <img
                  src="../assets/images/default.jpg"
                  id="login_user_headUrl"
                />
                <i class="icon_caret_down"></i>
                <span style="font-size: 14px; float: right" @click="signOut()">
                  退出
                </span>
              </a>
            </div>
            <div class="header_msg">消息<i class="icon_caret_down"></i></div>
            <div class="header_daka">
              <a href="javascript:;">打卡</a>
            </div>
          </div>
          <div class="login-out" v-show="!ShowLogin">
            <a
              class="weibo-login"
              href="./strategy_index.html#"
              title="微博登录"
              rel="nofollow"
            ></a>
            <a
              class="qq-login"
              href="./strategy_index.html#"
              title="QQ登录"
              rel="nofollow"
            ></a>
            <a
              class="weixin-login"
              href="./strategy_index.html#"
              title="微信登录"
              rel="nofollow"
            ></a>
            <a
              id="_j_showlogin"
              title="登录骡窝窝"
              rel="nofollow"
              @click="toLogin()"
              >登录</a
            >
            <span class="split">|</span>
            <a href="./regist.html" title="注册帐号" rel="nofollow">注册</a>
          </div>
        </div>
        <div class="shadow"></div>
      </div>
    </div>
    <div id="app" class="container">
      <br /><br />
      <div class="main clearfix">
        <div class="content">
          <div class="filter">
            <div class="filter-wrapper clearfix">
              <ul class="filter-tag">
                <li
                  :class="active === 'b' ? 'on _j_tag' : '_j_tag'"
                  @click="toTomes('b')"
                >
                  <a href="javascript:;">全部</a>
                </li>
                <li
                  :class="active === index ? 'on _j_tag' : '_j_tag'"
                  v-for="(item, index) in listThemes"
                  :key="index"
                  @click="toTomes(index, item.id)"
                >
                  <a href="javascript:;">{{ item.name }}</a>
                </li>
              </ul>
              <a href="javascript:void(0);" class="trigger _j_trigger_btn"
                >更多</a
              >
            </div>
          </div>
          <!-- 内容 -->
          <div class="guide-list">
            <div
              class="item clearfix"
              v-for="(item, index) in StrategiesList"
              :key="index"
              @click="toDetail(item.id)"
            >
              <a target="_blank" class="_j_item">
                <div class="img">
                  <img :src="item.coverUrl" />
                </div>
                <div class="detail">
                  <h3>{{ item.title }}</h3>
                  <ul class="detail_ul">
                    {{
                      item.summary
                    }}
                  </ul>
                  <div class="extra">
                    <span class="location"><i></i>{{ item.destName }}</span>
                    <span class="view"><i></i>{{ item.viewnum }}</span>
                  </div>
                </div>
              </a>
            </div>
            <!-- 分页 -->
            <div style="float: right">
              <div style="float: left">
                <span style="line-height: 30px">
                  共{{ Strategies.totalPages }}页 /
                  {{ Strategies.totalElements }}条&nbsp;&nbsp;&nbsp;</span
                >
              </div>
              <div
                id="pagination"
                class="jq-pagination"
                style="display: inline"
              >
                <a
                  class="prev"
                  href="javascript:void(0);"
                  jp-role="prev"
                  jp-data="0"
                  v-show="!isShow"
                  @click="nextPage('1')"
                  >上一页</a
                ><a
                  href="javascript:void(0);"
                  jp-role="page"
                  jp-data="1"
                  :class="fontActive === 1 ? 'active' : ''"
                  @click="nextPage('1')"
                  >1</a
                ><a
                  href="javascript:void(0);"
                  jp-role="page"
                  jp-data="2"
                  @click="nextPage_to('2')"
                  :class="fontActive === 'b' ? 'active' : ''"
                  v-if="Strategies.totalPages === 2 ? true : false"
                  >2</a
                ><a
                  class="next"
                  href="javascript:void(0);"
                  jp-role="next"
                  jp-data="2"
                  @click="nextPage_to('2')"
                  v-show="isShow"
                  v-if="Strategies.totalPages === 2 ? true : false"
                  >下一页</a
                ><a
                  class="last"
                  href="javascript:void(0);"
                  jp-role="last"
                  jp-data="2"
                  @click="nextPage('2')"
                  v-show="isShow"
                  >尾页</a
                >
              </div>
            </div>
          </div>
        </div>
        <div class="side-sales">
          <h3>本周热卖</h3>
          <ul>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgBEFs6E4yAPz00AAhnvJUJ1j8238.gif"
                /></span>
                <div
                  title="广州长隆野生动物世界门票    随买随用 ／广州长隆旅游度假区／一票通玩 ／ 快速出票快捷入园 ／ 含空中览车及小火车/亲子乐园/赠送电子导览／自然零距离／广州长隆野生动物园"
                  class="title"
                >
                  广州长隆野生动物世界门票 随买随用 ／广州...
                </div>
                <span class="price">¥260</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wweM2AVCMFAAzr37WPWDI967.gif"
                /></span>
                <div
                  title="广州长隆欢乐世界门票   当天可买／广州长隆旅游度假区／快速出票快捷入园／收藏店铺送卷送攻略／广东番禺汉溪长隆/长隆成人票／情侣票／家庭票／双人票／儿童票"
                  class="title"
                >
                  广州长隆欢乐世界门票 当天可买／广州长隆旅...
                </div>
                <span class="price">¥187</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wdwVmAVaZUADon6OL7_xw084.gif"
                /></span>
                <div
                  title="当天可订/广州长隆野生动物世界门票/长隆野生动物园/广州长隆旅游度假区/含缆车小火车/南北门均可取票（提前1天规则退）"
                  class="title"
                >
                  当天可订/广州长隆野生动物世界门票/长隆野生...
                </div>
                <span class="price">¥256</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgBEFrEdj-Ac-nXAAOvgGsSLJI85.jpeg"
                /></span>
                <div
                  title="广州长隆水上乐园门票 一票通玩（电子票／当地必玩／免预约／超级大喇叭/热浪谷/意想不到的水上乐园）"
                  class="title"
                >
                  广州长隆水上乐园门票 一票通玩（电子票／当地...
                </div>
                <span class="price">¥122</span>
              </a>
            </li>
            <li>
              <a href="javascript:;" target="_blank"
                ><span class="image"
                  ><img
                    src="../assets/images/wKgED1wk2LeAC2NJAAJQtab6Yqw67.jpeg"
                /></span>
                <div
                  title="寻味广州1日游（6人小团·探黄埔军校陈家祠·电车看广州塔+沙面·西关美食秘籍·本地人带玩）"
                  class="title"
                >
                  寻味广州1日游（6人小团·探黄埔军校陈家祠·...
                </div>
                <span class="price">¥288</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="footer" id="footer">
      <div class="ft-content" style="width: 1105px">
        <div class="ft-info clearfix">
          <dl class="ft-info-col ft-info-intro">
            <dt>骡窝窝旅游网</dt>
            <dd>
              叩丁狼是一家专注于培养高级IT技术人才，为学员提供定制化IT职业规划方案及
            </dd>
            <dd>
              意见咨询服务的教育科技公司，为您提供海量优质课程，以及创新的线上线下学
            </dd>
            <dd>习体验，帮助您获得全新的个人发展和能力提升。</dd>
          </dl>
          <dl class="ft-info-col ft-info-qrcode">
            <dd>
              <span class="ft-qrcode-tejia"></span>
            </dd>
            <dd>
              <span class="ft-qrcode-weixin"></span>
            </dd>
            <dd>
              <span
                class="ft-qrcode-weixin"
                style="background-image: url(../assets/images/qrcode.jpg&#39;)"
              ></span>
            </dd>
          </dl>
          <dl class="ft-info-social">
            <dt>向崇尚自由的加勒比海盗致敬！</dt>
            <dd>
              <a
                class="ft-social-weibo"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
              <a
                class="ft-social-qqt"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
              <a
                class="ft-social-qzone"
                target="_blank"
                href="javascript:;"
                rel="nofollow"
                ><i class="ft-social-icon"></i
              ></a>
            </dd>
          </dl>
        </div>

        <div class="ft-links">
          <a target="_blank" href="http://china.makepolo.com/">马可波罗</a
          ><a target="_blank" href="http://www.onlylady.com/">Onlylady女人志</a
          ><a target="_blank" href="http://trip.elong.com/">艺龙旅游指南</a
          ><a target="_blank" href="http://www.cncn.com/">欣欣旅游网</a>
          <a target="_blank" href="http://www.8264.com/">户外运动</a
          ><a target="_blank" href="http://www.yue365.com/">365音乐网</a
          ><a target="_blank" href="http://ishare.iask.sina.com.cn/"
            >爱问共享资料</a
          ><a target="_blank" href="http://www.uzai.com/">旅游网</a>
          <a target="_blank" href="http://www.zongheng.com/">小说网</a>
          <a target="_blank" href="http://www.xuexila.com/">学习啦</a
          ><a target="_blank" href="http://www.yododo.com/">游多多自助游</a
          ><a target="_blank" href="http://www.zhcpic.com/">问答</a
          ><a target="_blank" href="http://huoche.mafengwo.cn/">火车时刻表</a>
          <a target="_blank" href="http://www.lvmama.com/">驴妈妈旅游网</a>
          <a target="_blank" href="http://www.haodou.com/">好豆美食网</a
          ><a target="_blank" href="http://www.taoche.com/">二手车</a
          ><a target="_blank" href="http://www.lvye.cn/">绿野户外</a
          ><a target="_blank" href="http://www.tuniu.com/">途牛旅游网</a>
          <a target="_blank" href="http://www.mapbar.com/">图吧</a>
          <a target="_blank" href="http://www.chnsuv.com/">SUV联合越野</a
          ><a target="_blank" href="http://www.uc.cn/">手机浏览器</a
          ><a target="_blank" href="http://sh.city8.com/">上海地图</a
          ><a target="_blank" href="http://www.tianqi.com/">天气预报查询</a>
          <a target="_blank" href="http://www.ly.com/">同程旅游</a>
          <a target="_blank" href="http://www.tieyou.com/">火车票</a
          ><a target="_blank" href="http://www.yunos.com/">YunOS</a
          ><a target="_blank" href="http://you.ctrip.com/">携程旅游</a
          ><a target="_blank" href="http://www.jinjiang.com/">锦江旅游</a>
          <a target="_blank" href="http://www.huoche.net/">火车时刻表</a>
          <a target="_blank" href="http://www.tripadvisor.cn/">TripAdvisor</a
          ><a target="_blank" href="http://www.tianxun.com/">天巡网</a
          ><a target="_blank" href="http://www.mayi.com/">短租房</a
          ><a target="_blank" href="http://www.zuzuche.com/">租租车</a>
          <a target="_blank" href="http://www.5fen.com/">五分旅游网</a>
          <a target="_blank" href="http://www.zhuna.cn/">酒店预订</a
          ><a target="_blank" href="http://www.ailvxing.com/">爱旅行网</a
          ><a target="_blank" href="http://360.mafengwo.cn/all.php">旅游</a
          ><a target="_blank" href="http://vacations.ctrip.com/">旅游网</a>
          <a target="_blank" href="http://www.wed114.cn/">wed114结婚网</a>
          <a target="_blank" href="http://www.chexun.com/">车讯网</a
          ><a target="_blank" href="http://www.aoyou.com/">遨游旅游网</a
          ><a target="_blank" href="http://www.91.com/">手机</a>
          <a href="javascript:;" target="_blank">更多友情链接&gt;&gt;</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ApiStrategies, ApiThemes, ApiDetail } from "@/request/api";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      currentPage: "",
      destId: "",
      themeId: "",
      StrategiesList: [],
      Strategies: [],
      listThemes: [],
      active: 0,
      fontActive: 1,
      isShow: true,
    };
  },
  async created() {
    let res = await ApiStrategies();
    this.StrategiesList = res.data.content;
    this.Strategies = res.data;
    if (res.code !== 200) {
      return;
    }
    this.active = "b";
    let res2 = await ApiThemes();
    this.listThemes = res2.data;
    console.log(res2);
  },
  computed: {
    ...mapState({
      ShowLogin: (state) => state.Login.isShow,
    }),
  },
  methods: {
    ...mapMutations({
      isShowLogin: "Login/changIsShow",
    }),
    async toTomes(i, id) {
      this.active = i;
      let res = await ApiStrategies("1", this.destId, id);
      this.StrategiesList = res.data.content;
      this.Strategies = res.data;

      console.log(res);
    },
    // 下一页
    async nextPage(i) {
      let res = await ApiStrategies(i);
      this.StrategiesList = res.data.content;
      this.Strategies = res.data;
      this.fontActive = 1;
      this.isShow = true;
      console.log(res);
    },
    async nextPage_to(i) {
      let res = await ApiStrategies(i);
      this.StrategiesList = res.data.content;
      this.Strategies = res.data;
      this.fontActive = "b";
      this.isShow = false;
    },
    toHome() {
      this.$router.push({
        path: "/",
      });
    },
    backDestination() {
      this.$router.push({
        path: "/destination",
      });
    },
    // 去到详情页
    toDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    // 退出按钮
    signOut() {
      localStorage.removeItem("x-authorization");
      this.isShowLogin(false);
    },
  },
};
</script>

<style scoped>
@import "@/assets/css/travelguide.css";
@import "@/assets/css/jqPagination.css";
</style>